<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>MyBlog</title>
    <link rel="stylesheet" href="./style.css" />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"
    />
  </head>
  <body>
    <!-- 导航栏 -->
    <nav>
      <div class="nav-content">
        <div class="logo">
          <a href="#home">MyBlog</a>
        </div>
        <ul class="nav-links">
          <li><a href="#home">首页</a></li>
          <li><a href="#about">关于我</a></li>
          <li><a href="#skills">技能</a></li>
          <li><a href="#projects">项目</a></li>
          <li><a href="#contact">联系我</a></li>
        </ul>
        <div class="menu-btn">
          <i class="fas fa-bars"></i>
        </div>
      </div>
    </nav>

    <!-- 首页部分 -->
    <section id="home" class="home">
      <div class="home-content">
        <div class="profile-container">
          <div class="profile-image">
            <img src="./images/avatar.jpg" alt="头像" />
          </div>
          <div class="profile-text">
            <h1>你好，我是<span>刘洋</span></h1>
            <div class="typing-container">
              <span class="typing-text"></span>
            </div>
            <p class="bio">热爱编程，专注于全栈开发，致力于创造优秀的Web应用</p>
            <div class="social-links">
              <a
                href="https://gitee.com/lyDevelop"
                target="_blank"
                title="Gitee"
              >
                <i class="fab fa-git-alt"></i>
              </a>
              <a href="mailto:l13704095419@163.com" title="Email">
                <i class="fas fa-envelope"></i>
              </a>
              <a href="tel:13704095419" title="Phone">
                <i class="fas fa-phone-alt"></i>
              </a>
            </div>
            <a href="#about" class="btn">了解更多</a>
          </div>
        </div>
      </div>
    </section>

    <!-- 关于我部分 -->
    <section id="about" class="about">
      <h2 class="section-title">关于我</h2>
      <div class="about-content">
        <div class="about-text">
          <p>
            我是一名充满热情的开发者，专注于创建优秀的Web应用程序。我热爱学习新技术，并且享受解决复杂问题的过程。
          </p>
          <p>
            在过去的几年里，我参与了多个项目的开发，积累了丰富的实践经验。我相信技术可以改变世界，而我正在为此努力。
          </p>
        </div>
      </div>
    </section>

    <!-- 技能部分 -->
    <section id="skills" class="skills">
      <h2 class="section-title">技能专长</h2>
      <div class="skills-content">
        <!-- 技能卡片将通过JavaScript动态生成 -->
      </div>
    </section>

    <!-- 项目部分 -->
    <section id="projects" class="projects">
      <h2 class="section-title">我的项目</h2>
      <div class="projects-content">
        <!-- 项目卡片将通过JavaScript动态生成 -->
      </div>
    </section>

    <!-- 联系部分 -->
    <section id="contact" class="contact">
      <h2 class="section-title">联系我</h2>
      <div class="contact-content">
        <div class="contact-info">
          <!-- 联系方式将通过JavaScript动态生成 -->
        </div>
      </div>
    </section>

    <!-- 页脚 -->
    <footer>
      <div class="footer-wrapper">
        <div class="footer-content">
          <div class="footer-section">
            <h3>关于</h3>
            <p>一个热爱编程的开发者，致力于创造优秀的Web应用。</p>
          </div>
          <div class="footer-section">
            <h3>快速链接</h3>
            <ul class="footer-links">
              <li><a href="#home">首页</a></li>
              <li><a href="#about">关于我</a></li>
              <li><a href="#skills">技能</a></li>
              <li><a href="#projects">项目</a></li>
              <li><a href="#contact">联系我</a></li>
            </ul>
          </div>
          <div class="footer-section">
            <h3>联系方式</h3>
            <ul class="footer-links">
              <li>
                <a href="mailto:l13704095419@163.com">
                  <i class="fas fa-envelope"></i> l13704095419@163.com
                </a>
              </li>
              <li>
                <a href="tel:13704095419">
                  <i class="fas fa-phone-alt"></i> 13704095419
                </a>
              </li>
              <li>
                <a href="https://gitee.com/lyDevelop" target="_blank">
                  <i class="fab fa-git-alt"></i> Gitee
                </a>
              </li>
            </ul>
          </div>
        </div>
        <div class="footer-bottom">
          <p>
            &copy; <span id="currentYear"></span> 个人博客. All rights reserved.
          </p>
        </div>
      </div>
    </footer>

    <script src="./script.js"></script>
  </body>
</html>
